<template>
   <el-container
   direction="vertical"
   >
      <el-table
        v-bind="$attrs"
        header-row-class-name="el-table-tj"
        v-on="$listeners"
        fit
        class="wjf-table"
      >
        <slot name="selection" />
        <slot name="pre-column" />
        <el-table-column
          v-for="item in columns"
          :key="item.key"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :selectable="item.selectable"
          :align="item.align||'center'"
          :fixed="item.fixed"
          :type="item.type"
          :header-align="item.headerAlign"
        >
          <template slot-scope="scope">
            <slot :scope="scope" :name="item.key">
               <span slot="content"> {{ scope. row[item.key] }} </span>
            </slot>
          </template>
        </el-table-column>
        <slot name="next-column" />
      </el-table>
   </el-container>
</template>

<script>
export default {
  name: 'WjfTable',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    indent: {
      type: Number,
      default: 50
    }
  },
  data() {
    return {
      guard: 1
    }
  },
  methods: {
  }
}
</script>

<style>
@keyframes treeTableShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes treeTableShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.wjf-table {
  clear: both;
}
.wjf-table .tree-ctrl {
  position: relative;
  cursor: pointer;
  /* color: #2196f3; */
}

.wjf-table .el-icon-arrow-left {
  display: none;
}
.wjf-table .el-icon-arrow-right {
  display: none;
}
.wjf-table .el-table-tj {
  color: #409eff;
  background-color: #a9d3ff29 !important;
}
.el-table th,
.el-table tr {
  background-color: unset;
}
</style>
